extends ../shared/CoSearchLayout.pug
block jumbotron
    include ../shared/CoNETConnectInfo
block jumbotron1
    .language( style="z-index: 999;top: 1.3em;right: 1em;position: fixed;width: 2em;")
        .ui.text.shape.languageText( data-bind = " click: selectItem " )
            .sides
                span.ui.header.side.en.languageItem.languageTextCoverColor
                    i.flag.united.kingdom.large
                    //-span.languageItemSpan( data-bind = " text: menu[ 'en' ][0].showName " )
                span.ui.header.side.tw.languageItem.languageTextCoverColor
                    i.flag.taiwan.large
                    //-span.languageItemSpan( data-bind = " text: menu[ 'tw' ][0].showName " )
                span.ui.header.side.zh.languageItem.languageTextCoverColor
                    i.flag.china.large
                    //-span.languageItemSpan( data-bind = " text: menu[ 'zh' ][0].showName " )
                span.ui.header.side.ja.languageItem.languageTextCoverColor
                    i.flag.japan.large
                    //-span.languageItemSpan( data-bind = " text: menu[ 'ja' ][0].showName " )
    
    <!-- ko if: showMain() -->
    .main
        
        <!-- ko if: !searchItem() -->
        #coSearchBackGround( data-bind = " css: { animationBlur: backGroundBlue }, click: function () { hasFocusShowTool ( false ); backGroundBlue ( false ) }" )
            include coSearchImage.html
        <!-- /ko -->

        <!-- ko if: showMainSearchForm() -->
        form#coSearchForm.ui.form( data-bind = " style: { 'margin-top': showSearchSetupForm() ? '-50%' : '-30%' }, submit: search_form " style = "100%" )
            <!-- ko if: !showSearchSetupForm() -->
            .field
                .ui.search
                    .ui.input.huge.icon( data-bind = "css : { animationSearchInput: hasFocus, 'error': showSearchError(), 'loading disabled': showInputLoading }" style = "width: 100%;border-radius: 500rem;" )
                        input( style = "color:rgba(0,0,0,0.5); border-radius: 500rem; width: 100%;" type = "text"
                            data-bind = "attr: { placeholder: showSearchError() ? infoDefine[ languageIndex() ].coSearch.errorMessage [ errorMessageIndex() ]: infoDefine[ languageIndex() ].coSearch.searchInputPlaceholder }, css : { backgroundTransparent: ! backGroundBlue ()}, textInput: searchInputText, hasFocus: hasFocus")
                        
                        <!-- ko if: !showSearchError() -->
                        <!-- ko if : !hasFocusShowTool() -->
                        i.icon.link.circular( data-bind = " html: searchSetupIcon (), click: function () { searchSetupClick ()}" style = "box-shadow: 0 0 0 0.1em ; color: #42c8f4!important;" )
                        <!-- /ko -->

                        <!-- ko if : hasFocusShowTool -->

                        <!-- ko if: !searchInputText().length -->
                        i.icon.image.outline.link.circular( data-bind = " click: function (){ document.getElementById('imageInput1').click() } " style = "box-shadow: 0 0 0 0.1em; color: #42c8f4!important;")
                        input( onchange = "fileInputSelected ( this )" id = "imageInput1" type = "file" accept = 'image/gif,image/jpeg,image/jpg,image/png' style="opacity:0" )
                        <!-- /ko -->


                        <!-- ko if: searchInputText().length -->
                        i.icon.search.link.circular( style = "box-shadow: 0 0 0 0.1em; color: #4285f4!important;" data-bind = "click: search_form ")
                        <!-- ko if : !showInputLoading() -->
                        i.icon.language.circular.link( style="box-shadow: 0 0 0 0.1em;color: #7742b9!important;margin-right: 2.5em" )
                        <!-- /ko -->
                        <!-- /ko -->

                        <!-- /ko -->

                        <!-- /ko -->

                        <!-- ko if: showSearchError -->
                        
                        i.icon.link.circular.red.close( data-bind = " click: function () { searchInputCloseError() }")
                        <!-- /ko -->
            
            
            <!-- /ko -->
            
            <!-- ko if: showSearchSetupForm() -->
            .SetupForm( style = "margin: 5em;")
                //-h3.ui.header.shadowText1( data-bind = " text: infoDefine[ languageIndex() ].coSearch.coSearchConfigMenu[ 0 ]" style = " color: white;")
                .ui.link.cards
                    
                    .card.AppCardTop( data-bind = " click: function() { searchSetup ('g')} " style = " background: #ffffff82;")
                        .content
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -70 270 180">
                                <path fill="#EA4335" d="M115.75 47.18c0 12.77-9.99 22.18-22.25 22.18s-22.25-9.41-22.25-22.18C71.25 34.32 81.24 25 93.5 25s22.25 9.32 22.25 22.18zm-9.74 0c0-7.98-5.79-13.44-12.51-13.44S80.99 39.2 80.99 47.18c0 7.9 5.79 13.44 12.51 13.44s12.51-5.55 12.51-13.44z"/>
                                <path fill="#FBBC05" d="M163.75 47.18c0 12.77-9.99 22.18-22.25 22.18s-22.25-9.41-22.25-22.18c0-12.85 9.99-22.18 22.25-22.18s22.25 9.32 22.25 22.18zm-9.74 0c0-7.98-5.79-13.44-12.51-13.44s-12.51 5.46-12.51 13.44c0 7.9 5.79 13.44 12.51 13.44s12.51-5.55 12.51-13.44z"/>
                                <path fill="#4285F4" d="M209.75 26.34v39.82c0 16.38-9.66 23.07-21.08 23.07-10.75 0-17.22-7.19-19.66-13.07l8.48-3.53c1.51 3.61 5.21 7.87 11.17 7.87 7.31 0 11.84-4.51 11.84-13v-3.19h-.34c-2.18 2.69-6.38 5.04-11.68 5.04-11.09 0-21.25-9.66-21.25-22.09 0-12.52 10.16-22.26 21.25-22.26 5.29 0 9.49 2.35 11.68 4.96h.34v-3.61h9.25zm-8.56 20.92c0-7.81-5.21-13.52-11.84-13.52-6.72 0-12.35 5.71-12.35 13.52 0 7.73 5.63 13.36 12.35 13.36 6.63 0 11.84-5.63 11.84-13.36z"/>
                                <path fill="#34A853" d="M225 3v65h-9.5V3h9.5z"/>
                                <path fill="#EA4335" d="M262.02 54.48l7.56 5.04c-2.44 3.61-8.32 9.83-18.48 9.83-12.6 0-22.01-9.74-22.01-22.18 0-13.19 9.49-22.18 20.92-22.18 11.51 0 17.14 9.16 18.98 14.11l1.01 2.52-29.65 12.28c2.27 4.45 5.8 6.72 10.75 6.72 4.96 0 8.4-2.44 10.92-6.14zm-23.27-7.98l19.82-8.23c-1.09-2.77-4.37-4.7-8.23-4.7-4.95 0-11.84 4.37-11.59 12.93z"/>
                                <path fill="#4285F4" d="M35.29 41.41V32H67c.31 1.64.47 3.58.47 5.68 0 7.06-1.93 15.79-8.15 22.01-6.05 6.3-13.78 9.66-24.02 9.66C16.32 69.35.36 53.89.36 34.91.36 15.93 16.32.47 35.3.47c10.5 0 17.98 4.12 23.6 9.49l-6.64 6.64c-4.03-3.78-9.49-6.72-16.97-6.72-13.86 0-24.7 11.17-24.7 25.03 0 13.86 10.84 25.03 24.7 25.03 8.99 0 14.11-3.61 17.39-6.89 2.66-2.66 4.41-6.46 5.1-11.65l-22.49.01z"/>
                            </svg>
                    .card.AppCardTop( data-bind = " click: function() { searchSetup ('b')} " style = " background: #ffffff82;")
                        .content
                            <svg viewBox="0 -170 1000 600">
                                <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" transform="translate(312,-795.66903)">
                                    <path style="fill:#008373;fill-opacity:1;stroke:none" d="m -311.5,796.16903 80.6273,28.36401 0,283.80836 113.56729,-65.5599 -55.67962,-26.1246 -35.12739,-87.43067 178.939297,62.86452 0,91.39515 -201.653597,116.3102 -80.67328,-44.875 z" />
                                    <g transform="matrix(8.653063,0,0,8.653063,-2616.6875,-11921.907)" style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#008373;fill-opacity:1;stroke:none;font-family:Sans" id="flowRoot3000">
                                    <path d="m 313.01562,1507.0953 0,-28.0078 7.96875,0 c 2.42187,10e-5 4.34244,0.5925 5.76172,1.7774 1.41926,1.1849 2.12889,2.7279 2.12891,4.6289 -2e-5,1.5885 -0.42971,2.9688 -1.28906,4.1406 -0.85939,1.1719 -2.04429,2.0052 -3.55469,2.5 l 0,0.078 c 1.888,0.2214 3.39842,0.9343 4.53125,2.1387 1.13279,1.2044 1.6992,2.7702 1.69922,4.6973 -2e-5,2.3958 -0.8594,4.3359 -2.57813,5.8203 -1.71876,1.4844 -3.88673,2.2265 -6.5039,2.2265 z m 3.28125,-25.039 0,9.043 3.35938,0 c 1.79686,0 3.20962,-0.433 4.23828,-1.2989 1.02863,-0.8658 1.54295,-2.0865 1.54297,-3.6621 -2e-5,-2.7213 -1.79038,-4.082 -5.37109,-4.082 z m 0,11.9922 0,10.0781 4.45313,0 c 1.92707,0 3.42121,-0.4557 4.48242,-1.3672 1.06118,-0.9114 1.59178,-2.1614 1.5918,-3.75 -2e-5,-3.3073 -2.25262,-4.9609 -6.75781,-4.9609 z" style="font-variant:normal;font-stretch:normal;fill:#008373;fill-opacity:1;stroke:none;font-family:Segoe UI;-inkscape-font-specification:Segoe UI" id="path3009" inkscape:connector-curvature="0"/>
                                    <path d="m 336.08002,1482.6479 c -0.57292,0 -1.0612,-0.1953 -1.46484,-0.5859 -0.40365,-0.3906 -0.60547,-0.8854 -0.60547,-1.4844 0,-0.5989 0.20182,-1.097 0.60547,-1.4941 0.40364,-0.3971 0.89192,-0.5957 1.46484,-0.5957 0.58593,0 1.08398,0.1986 1.49414,0.5957 0.41015,0.3971 0.61523,0.8952 0.61524,1.4941 -10e-6,0.573 -0.20509,1.0612 -0.61524,1.4649 -0.41016,0.4036 -0.90821,0.6054 -1.49414,0.6054 z m 1.5625,24.4474 -3.20312,0 0,-19.8474 3.20312,0 z" style="font-variant:normal;font-stretch:normal;fill:#008373;fill-opacity:1;stroke:none;font-family:Segoe UI;-inkscape-font-specification:Segoe UI" id="path3011" inkscape:connector-curvature="0" sodipodi:nodetypes="ssssssccsccccc"/>
                                    <path d="m 359.4053,1507.0953 -3.20313,0 0,-11.2601 c 0,-4.2448 -1.42999,-6.3672 -4.52893,-6.3672 -1.60158,0 -2.92644,0.6022 -3.97461,1.8066 -1.04819,1.2045 -1.57227,2.7247 -1.57227,4.5606 l 0,11.2601 -3.20312,0 0,-19.8473 3.20312,0 0,3.2522 0.0781,0 c 1.51041,-2.5261 3.6629,-3.7275 6.443,-3.7275 2.18748,0 3.86066,0.7064 5.01953,2.1191 1.15883,1.4128 1.73828,3.4538 1.73828,6.1231 z" style="font-variant:normal;font-stretch:normal;fill:#008373;fill-opacity:1;stroke:none;font-family:Segoe UI;-inkscape-font-specification:Segoe UI" id="path3013" inkscape:connector-curvature="0" sodipodi:nodetypes="ccsscsccccccscsc"/>
                                    <path d="m 381.85178,1505.4046 c 0,7.3437 -3.51564,11.0156 -10.54688,11.0156 -2.47396,0 -4.51337,-0.4405 -6.36232,-1.378 l 0.84027,-2.7464 c 0,0 2.17127,1.4431 5.48299,1.4431 4.92186,0 7.38281,-2.5703 7.38281,-7.8046 l 0,-2.1654 -0.0781,0 c -1.52345,2.5521 -3.66907,3.7952 -6.72895,3.7952 -2.48699,0 -4.48894,-0.7493 -6.00586,-2.5266 -1.51693,-1.7774 -2.27539,-4.1634 -2.27539,-7.1582 0,-3.3984 0.81705,-6.1003 2.45117,-8.1055 1.63411,-2.0052 3.87044,-3.0078 6.70899,-3.0078 2.6953,0 4.54794,1.0807 5.85004,3.2422 l 0.0781,0 0,-2.7602 3.20313,0 z m -3.20313,-7.3522 0,-2.7899 c 0,-1.5886 -0.53712,-2.9492 -1.61132,-4.0821 -1.07424,-1.1328 -2.31919,-1.6992 -3.92074,-1.6992 -1.97917,0 -3.52865,0.7194 -4.64843,2.1582 -1.1198,1.4388 -1.6797,3.4538 -1.67969,6.0449 -1e-5,2.2266 0.5371,3.8479 1.61133,5.1825 1.07421,1.3347 2.49673,2.002 4.26758,2.002 1.79686,0 3.16551,-0.638 4.29182,-1.9141 1.12629,-1.276 1.68945,-2.9101 1.68945,-4.9023 z" style="font-variant:normal;font-stretch:normal;fill:#008373;fill-opacity:1;stroke:none;font-family:Segoe UI;-inkscape-font-specification:Segoe UI" id="path3015" inkscape:connector-curvature="0" sodipodi:nodetypes="ssccssccscsssccccssscssscscs"/>
                                    </g>
                                </g>
                            </svg>
                    .card.AppCardTop( data-bind = " click: function() { searchSetup ('y')} " style = " background: #ffffff82;")
                        .content
                            <svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" viewBox="0 -150 500 280" xmlns:dc="http://purl.org/dc/elements/1.1/">
                                <defs>
                                <radialGradient id="c" gradientUnits="userSpaceOnUse" cy="1680.7" cx="1214.2" gradientTransform="matrix(-1.223 -.23720 .15644 -.94671 2438.6 3564.7)" r="22.495">
                                <stop stop-color="#6700e8" offset="0"/>
                                <stop stop-color="#5c00ce" offset=".39936"/>
                                <stop stop-color="#5600bf" stop-opacity=".045045" offset=".70124"/>
                                <stop stop-color="#220047" stop-opacity="0" offset="1"/>
                                </radialGradient>
                                <linearGradient id="j" y2="1916" gradientUnits="userSpaceOnUse" x2="397.81" gradientTransform="matrix(.60986 0 0 .60986 -1015.1 -735.2)" y1="1916" x1="372.77">
                                <stop stop-color="#5500bd" offset="0"/>
                                <stop stop-color="#5200b2" offset="1"/>
                                </linearGradient>
                                <linearGradient id="e" y2="1704.2" gradientUnits="userSpaceOnUse" x2="1198.6" gradientTransform="matrix(.60986 0 0 .60986 -1015.1 -735.2)" y1="1962.9" x1="1161.2">
                                <stop stop-color="#47008d" offset="0"/>
                                <stop stop-color="#5100b3" offset="1"/>
                                </linearGradient>
                                <radialGradient id="b" gradientUnits="userSpaceOnUse" cy="2013.9" cx="1159.1" gradientTransform="matrix(-.21925 .74474 -.78219 -.23028 1523.9 90.984)" r="24.948">
                                <stop stop-color="#6000d8" offset="0"/>
                                <stop stop-color="#5c00cd" offset=".20886"/>
                                <stop stop-color="#5500be" offset=".37415"/>
                                <stop stop-color="#2d0062" offset="0.721"/>
                                <stop stop-color="#210045" offset="1"/>
                                </radialGradient>
                                <linearGradient id="g" y2="1699.4" xlink:href="#a" gradientUnits="userSpaceOnUse" x2="1020.9" gradientTransform="matrix(.60986 0 0 .60986 -1015.1 -735.2)" y1="2003.7" x1="829.87"/>
                                <linearGradient id="a">
                                <stop stop-color="#1b0041" offset="0"/>
                                <stop stop-color="#1b0041" offset=".10005"/>
                                <stop stop-color="#1b0041" offset=".20479"/>
                                <stop stop-color="#240052" offset="0.3"/>
                                <stop stop-color="#32006a" offset="0.4"/>
                                <stop stop-color="#3d007d" offset=".5"/>
                                <stop stop-color="#490098" offset="0.6"/>
                                <stop stop-color="#4f00a8" offset=".70026"/>
                                <stop stop-color="#5500bc" offset=".80312"/>
                                <stop stop-color="#5700c2" offset="0.9"/>
                                <stop stop-color="#6000da" offset="1"/>
                                </linearGradient>
                                <linearGradient id="f" y2="1983.8" gradientUnits="userSpaceOnUse" x2="829.28" gradientTransform="matrix(.60986 0 0 .60986 -1015.1 -735.2)" y1="1699.3" x1="979.93">
                                <stop stop-color="#1e0046" offset="0"/>
                                <stop stop-color="#2d0061" offset=".10005"/>
                                <stop stop-color="#33006b" offset=".20479"/>
                                <stop stop-color="#400082" offset="0.3"/>
                                <stop stop-color="#490096" offset="0.4"/>
                                <stop stop-color="#5000ac" offset=".5"/>
                                <stop stop-color="#5500bd" offset="0.6"/>
                                <stop stop-color="#4f00a8" offset=".70026"/>
                                <stop stop-color="#5500bc" offset=".80312"/>
                                <stop stop-color="#5700c2" offset="0.9"/>
                                <stop stop-color="#6000da" offset="1"/>
                                </linearGradient>
                                <linearGradient id="i" y2="1725.7" xlink:href="#a" gradientUnits="userSpaceOnUse" x2="664.27" gradientTransform="matrix(.60986 0 0 .60986 -1015.1 -735.2)" y1="1978" x1="462.79"/>
                                <linearGradient id="h" y2="1962.4" gradientUnits="userSpaceOnUse" x2="471.28" gradientTransform="matrix(.60986 0 0 .60986 -1015.1 -735.2)" y1="1725.4" x1="632.18">
                                <stop stop-color="#1c0044" offset="0"/>
                                <stop stop-color="#2f0065" offset=".10005"/>
                                <stop stop-color="#34006d" offset=".20479"/>
                                <stop stop-color="#3b007a" offset="0.3"/>
                                <stop stop-color="#3c007a" offset="0.4"/>
                                <stop stop-color="#490096" offset=".5"/>
                                <stop stop-color="#5000ab" offset="0.6"/>
                                <stop stop-color="#5400ba" offset=".70026"/>
                                <stop stop-color="#5500bc" offset=".80312"/>
                                <stop stop-color="#5700c2" offset="0.9"/>
                                <stop stop-color="#5c00ce" offset="1"/>
                                </linearGradient>
                                <linearGradient id="l" y2="1856.8" gradientUnits="userSpaceOnUse" x2="372.85" gradientTransform="matrix(.60986 0 0 .60986 -1015.1 -735.2)" y1="1856.8" x1="163.23">
                                <stop stop-color="#6700e8" offset="0"/>
                                <stop stop-color="#6700e8" offset=".5"/>
                                <stop stop-color="#6700e8" offset="1"/>
                                </linearGradient>
                                <linearGradient id="k" y2="1999.1" gradientUnits="userSpaceOnUse" x2="373.36" gradientTransform="matrix(.60986 0 0 .60986 -1015.1 -735.2)" y1="1999.1" x1="347.46">
                                <stop stop-color="#3f008b" offset="0"/>
                                <stop stop-color="#220050" offset="1"/>
                                </linearGradient>
                                <linearGradient id="n" y2="1713.2" gradientUnits="userSpaceOnUse" x2="163.25" gradientTransform="matrix(.60986 0 0 .60986 -1015.1 -735.2)" y1="1713.2" x1="138.23">
                                <stop stop-color="#390080" offset="0"/>
                                <stop stop-color="#31006e" offset=".5"/>
                                <stop stop-color="#250056" offset="1"/>
                                </linearGradient>
                                <linearGradient id="m" y2="1838.2" gradientUnits="userSpaceOnUse" x2="187.85" gradientTransform="matrix(.60986 0 0 .60986 -1015.1 -735.2)" y1="1838.2" x1="162.66">
                                <stop stop-color="#5a00c9" offset="0"/>
                                <stop stop-color="#4f00a8" offset="1"/>
                                </linearGradient>
                                <linearGradient id="q" y2="1909.6" gradientUnits="userSpaceOnUse" x2="51.417" gradientTransform="matrix(.60986 0 0 .60986 -1015.1 -735.2)" y1="1909.6" x1="-103.64">
                                <stop stop-color="#6700e8" offset="0"/>
                                <stop stop-color="#6700e8" offset=".50604"/>
                                <stop stop-color="#6700e8" offset="1"/>
                                </linearGradient>
                                <linearGradient id="s" y2="1718.5" gradientUnits="userSpaceOnUse" x2="-26.132" gradientTransform="matrix(.60986 0 0 .60986 -1015.1 -735.2)" y1="2005.1" x1="-169.29">
                                <stop stop-color="#4d00a1" offset="0"/>
                                <stop stop-color="#5200b4" offset="1"/>
                                </linearGradient>
                                <linearGradient id="y" y2="2047" gradientUnits="userSpaceOnUse" x2="-253.6" gradientTransform="matrix(.60986 0 0 .60986 -1015.1 -735.2)" y1="1878.8" x1="-253.6">
                                <stop stop-color="#210045" offset="0"/>
                                <stop stop-color="#25004d" offset=".25"/>
                                <stop stop-color="#2b005c" offset=".5"/>
                                <stop stop-color="#340071" offset=".74854"/>
                                <stop stop-color="#3e0088" offset="1"/>
                                </linearGradient>
                                <linearGradient id="x" y2="2047.3" gradientUnits="userSpaceOnUse" x2="-227.23" gradientTransform="matrix(.60986 0 0 .60986 -1015.1 -735.2)" y1="1877.2" x1="-248.82">
                                <stop stop-color="#5500bd" offset="0"/>
                                <stop stop-color="#5300b5" offset="1"/>
                                </linearGradient>
                                <linearGradient id="w" y2="1838.7" gradientUnits="userSpaceOnUse" x2="-273.09" gradientTransform="matrix(.60986 0 0 .60986 -1015.1 -735.2)" y1="1850.7" x1="-291.09">
                                <stop stop-color="#27005d" stop-opacity=".98039" offset="0"/>
                                <stop stop-color="#2b005d" offset=".31767"/>
                                <stop stop-color="#280055" offset=".59756"/>
                                <stop stop-color="#24004d" offset=".80878"/>
                                <stop stop-color="#230049" offset="1"/>
                                </linearGradient>
                                <linearGradient id="v" y2="1877.6" gradientUnits="userSpaceOnUse" x2="-250.33" gradientTransform="matrix(.60986 0 0 .60986 -1015.1 -735.2)" y1="1669.7" x1="-349.94">
                                <stop stop-color="#5100b2" offset="0"/>
                                <stop stop-color="#5500bd" offset="1"/>
                                </linearGradient>
                                <linearGradient id="u" y2="1877.2" gradientUnits="userSpaceOnUse" x2="-249.85" gradientTransform="matrix(.60986 0 0 .60986 -1015.1 -735.2)" y1="1667.8" x1="-149.7">
                                <stop stop-color="#5500bd" offset="0"/>
                                <stop stop-color="#47008d" offset="1"/>
                                </linearGradient>
                                <linearGradient id="t" y2="1819.8" gradientUnits="userSpaceOnUse" x2="-190.68" gradientTransform="matrix(.60986 0 0 .60986 -1015.1 -735.2)" y1="1808.7" x1="-209.43">
                                <stop stop-color="#1b0041" offset="0"/>
                                <stop stop-color="#21004f" offset="1"/>
                                </linearGradient>
                                <linearGradient id="r" y2="1759.1" gradientUnits="userSpaceOnUse" x2="-26.7" gradientTransform="matrix(.60986 0 0 .60986 -1015.1 -735.2)" y1="2007.7" x1="-122.89">
                                <stop stop-color="#21004e" offset="0"/>
                                <stop stop-color="#39007f" offset="1"/>
                                </linearGradient>
                                <linearGradient id="p" y2="1938.5" gradientUnits="userSpaceOnUse" x2="63.199" gradientTransform="matrix(.60986 0 0 .60986 -1015.1 -735.2)" y1="1945.5" x1="44.989">
                                <stop stop-color="#2a005a" offset="0"/>
                                <stop stop-color="#210046" offset="1"/>
                                </linearGradient>
                                <linearGradient id="o" y2="2003.3" gradientUnits="userSpaceOnUse" x2="115.15" gradientTransform="matrix(.60986 0 0 .60986 -1015.1 -735.2)" y1="1718.1" x1="-24.637">
                                <stop stop-color="#5500bd" offset="0"/>
                                <stop stop-color="#5000ac" offset="1"/>
                                </linearGradient>
                                <linearGradient id="d" y2="1701.9" gradientUnits="userSpaceOnUse" y1="1962.2" gradientTransform="matrix(.60986 0 0 .60986 -1015.1 -735.2)" x2="1225" x1="1177.8">
                                <stop stop-color="#210045" offset="0"/>
                                <stop stop-color="#430085" offset=".59416"/>
                                <stop stop-color="#5000b2" offset="1"/>
                                </linearGradient>
                                </defs>
                                <g transform="translate(1009.8 -337.49)">
                                <g transform="matrix(.5 0 0 .5 -379.18 197.8)">
                                <g>
                                    <path d="m-272.82 284.69c7.6616 1.281 12.78 5.9708 12.78 14.045 0 2.6723-1.101 6.435-1.8373 9.6153-5.1337 22.63-25.182 102.59-33.623 155.96l-7.7668-7.7668 24.719-164.16z" fill="url(#d)"/>
                                    <path d="m-772.42 306.42c-10.347 2.4776-20.506 2.4096-30.493 0l15.856 16.466z" fill="#6700e8"/>
                                    <path d="m-930.94 306.42c10.347 2.4776 20.506 2.4096 30.493 0l-15.856 16.466z" fill="#6700e8"/>
                                    <path d="m-1020.4 306.36c23.383 59.178 60.182 148.75 78.517 182.98l-27.144-8.2945-67.165-167.97z" fill="url(#o)"/>
                                    <path d="m-1041.7 306.35c7.4678 2.5018 13.662 2.6552 21.264 0l-15.113 9.2837z" fill="#6700e8"/>
                                    <path d="m-1031 312.81 68.439 167.85c-4.0492 4.3854-5.855 6.6864-9.792 8.7379-19.836-51.091-41.139-102.2-59.186-152.63l-8.9087-15.103z" fill="url(#p)"/>
                                    <path d="m-1089.8 489.33-20.204-7.1558 71.141-166.91 7.9282-2.4512v24.711c-11.062 31.919-39.135 101.95-58.866 151.81z" fill="url(#r)"/>
                                    <path d="m-1106.6 282.03 6.7084 15.246 17.076-7.9282 6.9443-7.3183c-10.985 2.4918-20.893 2.5746-30.729 0z" fill="#6700e8"/>
                                    <path d="m-1154.8 414.97-11.587 4.269-7.3183-12.807 72.573-115.87 5.1886-1.7772c7.1618-1.6184 14.973-3.354 20.061-6.7608-11.525 15.569-53.493 88.344-78.917 132.95z" fill="url(#t)"/>
                                    <path d="m-1170.6 413.15 3.0493-3.0493 71.795-121.34-10.809-6.7347c-8.6682 16.146-40.638 68.392-60.986 101.85l-9.7578 18.296z" fill="url(#u)"/>
                                    <path d="m-1228.5 282.03c15.916 28.207 40.349 67.667 60.986 101.85v26.224l-4.8789 4.8789-71.354-126.85z" fill="url(#v)"/>
                                    <path d="m-1240.3 289.7 11.761-7.6717c-12.62 2.6914-17.899 2.8627-30.493 0l4.8789 5.4887z" fill="#6700e8"/>
                                    <path d="m-1167.6 410.1-5.4887 7.9282-7.3184-3.0493c-13.625-23.55-53.678-95.287-78.672-132.95 5.0665 3.6714 11.911 5.686 19.817 6.9699z" fill="url(#w)"/>
                                    <path fill="url(#x)" d="m-1152.9 513.16-20.735-9.7578 1.8296-86.6 4.269-6.7085 12.807 4.8789z"/>
                                    <path d="m-1167.6 506.45-14.637 6.7085 1.8295-98.187 12.807-4.8789z" fill="url(#y)"/>
                                    <path d="m-1120 489.38c25.444-51.864 53.737-121.41 78.294-183.04l10.746 6.4742-69.462 169.92-14.089 4.8122z" fill="url(#s)"/>
                                    <path d="m-963.25 480.35 21.352 8.9925c-8.1908-2.0649-19.278-2.8566-30.42 0.0524l4.1688-10.267z" fill="#200045"/>
                                    <path d="m-1078.5 429.38 15.012-6.4416c21.625 0.76013 43.249 0.74922 64.874 0l15.228 6.6302-14.177 3.0996h-70.184z" fill="url(#q)"/>
                                    <path d="m-1068.5 435.71-10.08-6.3338c31.673-0.48441 63.394-0.44495 95.168 0.18863l-10.08 6.1451c-25.003-0.8102-50.005-0.71317-75.008 0z" fill="#200045"/>
                                    <path d="m-900.44 489.38-21.345-7.3183v-164.05l6.0986-3.0493 15.246-8.538c-3.1637 60.878-3.233 121.86 0 182.96z" fill="url(#m)"/>
                                    <path d="m-915.69 480.84v4.269l-15.247 4.269c2.4244-60.889 2.6556-121.87 0-182.96l15.247 8.538z" fill="url(#n)"/>
                                    <path d="m-802.92 489.38 21.345-7.3183v-164.05l-6.0986-3.0493-15.247-8.538c3.1637 60.878 3.233 121.86 0 182.96z" fill="url(#k)"/>
                                    <path d="m-915.63 397.52 12.816-5.7139c34.057 0.85838 68.155 0.79423 102.28 0l12.856 5.7139-15.902 3.8002h-99.346z" fill="url(#l)"/>
                                </g>
                                <path fill="url(#h)" d="m-664.79 306.35c-59.895 0-89.783 37.447-89.783 91.898 0 68.197 45.237 91.822 89.001 91.822 51.983 0 89.249-29.249 89.249-91.65 0-60.057-35.275-92.07-88.468-92.07zm-1.7915 8.6905c0.56294-0.0116 1.1312 0 1.6962 0 39.558 0 68.609 26.944 68.609 83.246 0 56.231-29.013 83.17-68.533 83.17-43.12 0-68.457-30.899-68.457-83.017 0-58.944 31.219-82.672 66.684-83.398z"/>
                                <path d="m-665 303.95c-64.688 0-98.626 41.016-98.626 94.185 0 58.196 37.05 93.69 98.531 93.69 66.468 0 98.931-40.001 98.931-93.08 0-59.18-38.768-94.795-98.835-94.795zm0.19058 6.0605c51.075 0 84.942 30.726 84.942 88.392 0 59.917-35.791 88.01-85.704 88.01-42.022 0-85.457-22.681-85.457-88.163 0-52.283 28.708-88.239 86.219-88.239z" fill="url(#i)"/>
                                <path fill="url(#f)" d="m-441.28 296.99c-60.789 0-102.44 34.367-102.44 101.35 0 65.71 38.747 102.42 102.69 102.42 48.426 0 101.48-24.872 101.48-101.48 0-82.684-57.955-102.28-101.73-102.28zm-0.32402 7.3183c48.376 0 84.008 29.388 84.008 94.204 0 70.459-43.103 93.309-83.932 93.309-43.622 0-83.36-25.6-83.36-94.7 0-71.621 44.046-92.813 83.284-92.813z"/>
                                <path fill="url(#g)" d="m-441.68 292.93c-64.42 0-113.66 36.579-113.66 104.59 0 56.035 32.755 105.35 114.2 105.35 68.949 0 113.97-37.907 113.97-104.36 0-62.667-41.996-105.58-114.5-105.58zm0.40025 6.8228c42.587 0 98.969 19.086 98.969 99.522 0 74.529-51.631 98.721-98.74 98.721-62.2 0-99.884-35.712-99.884-99.636 0-65.163 40.519-98.607 99.655-98.607z"/>
                                <path d="m-322.2 499.84c0-7.8687 4.7851-15.186 14.378-15.186 9.1817 0 16.052 5.4912 16.052 14.262 0 10.928-7.2317 14.955-13.858 14.955-9.1617 0-16.572-4.7539-16.572-14.031z" fill="url(#b)"/>
                                <path d="m-306.88 462.57c7.4355-52.557 11.958-107.79 16.301-162.87 0-10.977 7.2554-15.27 14.576-15.27 1.283 0 3.1753 0.2673 3.1753 0.2673l-1.9912 13.166-26.08 163.25z" fill="url(#e)"/>
                                <g fill="#200045">
                                    <path d="m-1182.2 513.16 14.664-10.743 14.609 10.743s-8.0987-1.4737-14.61-1.4737c-5.8748 0-14.664 1.4737-14.664 1.4737z"/>
                                    <path d="m-1120 489.4 20.456-8.8436c3.1211 3.742 5.8977 6.913 9.7311 8.7897-7.3639-1.9927-18.512-2.8867-30.184 0.0311z"/>
                                    <path d="m-930.94 489.38c9.903-2.3864 20.044-2.492 30.455 0l-15.208-8.538z"/>
                                    <path d="m-902.81 404.29-12.843-6.765c42.66 0.44483 85.32 0.5196 127.98 0l-12.826 6.725c-34.104-0.45812-68.208-0.43623-102.31 0.0402z"/>
                                </g>
                                <g>
                                    <path d="m-787.67 480.84v4.269l15.246 4.269c-2.4244-60.889-2.6556-121.87 0-182.96l-15.246 8.538z" fill="url(#j)"/>
                                    <path d="m-772.42 489.38c-9.903-2.3864-20.044-2.492-30.455 0l15.208-8.538z" fill="#200045"/>
                                    <path d="m-300.16 456.4-6.7572 6.1652c4.5277-0.79745 8.0291 0.38427 11.432 1.7557z" fill="#200045"/>
                                    <ellipse fill-rule="evenodd" rx="22.495" transform="matrix(.66068 0 0 .60986 -1078 -734.79)" ry="21.29" cy="1693.1" cx="1215" fill="url(#c)"/>
                                </g>
                                </g>
                                </g>
                            </svg>
                    .card.AppCardTop( data-bind = " click: function() { searchSetup ('d')} " style = " background: #ffffff82;")
                        .content
                            <svg viewBox="0 0 207.70001 163.80001" xmlns="http://www.w3.org/2000/svg">
                                <g transform="translate(-24.5 -19)">
                                    <circle cx="127" cy="79" fill="#de5833" r="60"/>
                                    <path d="m177.8 57.5c-2.8-6.6-6.8-12.5-11.8-17.5-5.1-5.1-11-9-17.5-11.8-6.8-2.9-14-4.3-21.5-4.3-7.4 0-14.7 1.5-21.5 4.3-6.6 2.7-12.5 6.7-17.5 11.8-5.1 5.1-9 11-11.8 17.5-2.9 6.8-4.3 14-4.3 21.5 0 7.5 1.5 14.7 4.3 21.5 2.8 6.6 6.8 12.5 11.8 17.5 5.1 5.1 11 9 17.5 11.8 6.8 2.9 14 4.3 21.5 4.3 7.4 0 14.7-1.5 21.5-4.3 6.5-2.8 12.4-6.8 17.5-11.8 5.1-5.1 9-11 11.8-17.5 2.9-6.8 4.3-14 4.3-21.5 0-7.5-1.4-14.7-4.3-21.5zm-38.8 71c-3.2-5.4-11.6-20.5-11.6-31.7 0-25.8 17.3-3.7 17.3-24.3 0-4.9-2.4-22.1-17.4-25.7-3.7-4.9-12.4-9.6-26.2-7.7 0 0 2.3.7 4.9 2 0 0-5 .7-5.2 4.1 0 0 9.9-.5 15.5 1.3-12.9 1.7-19.5 8.5-18.3 20.8 1.7 17.5 9.1 48.7 11.7 59.6-19.6-7-33.7-25.8-33.7-47.9 0-28.1 22.8-51 51-51 28.2 0 51 22.8 51 51-.1 24-16.7 44.1-39 49.5z" fill="#fff"/>
                                    <path clip-rule="evenodd" d="m124.2 87.3c0-6.6 9-8.7 12.4-8.7 9.2 0 22.2-5.9 25.4-5.8 3.3.1 5.4 1.4 5.4 2.9 0 2.2-18.4 10.5-25.5 9.8-6.8-.6-8.4.1-8.4 2.9 0 2.4 4.9 4.6 10.3 4.6 8.1 0 16-3.6 18.4-1.9 2.1 1.5-5.5 6.9-14.2 6.9-8.7 0-23.8-4.1-23.8-10.7z" fill="#fed30a" fill-rule="evenodd"/>
                                    <path d="m140.2 59.3c-2.4-3.1-6.7-3.2-8.2.4 2.3-1.8 5.1-2.2 8.2-.4z" fill="#2d4f8d"/>
                                    <path d="m113.5 59.4c-3.3-2-8.8-2.2-8.5 4.1 1.6-3.9 3.8-4.6 8.5-4.1z" fill="#2d4f8d"/>
                                    <path d="m138.2 65.2c-1.8 0-3.3 1.5-3.3 3.3 0 1.8 1.5 3.3 3.3 3.3 1.8 0 3.3-1.5 3.3-3.3 0-1.8-1.5-3.3-3.3-3.3zm1.2 3.1c-.5 0-1-.4-1-1 0-.5.4-1 1-1 .6 0 1 .4 1 1-.1.5-.5 1-1 1z" fill="#2d4f8d"/>
                                    <path d="m112.6 67c-2.1 0-3.8 1.7-3.8 3.8 0 2.1 1.7 3.8 3.8 3.8 2.1 0 3.8-1.7 3.8-3.8 0-2.1-1.7-3.8-3.8-3.8zm1.4 3.5c-.6 0-1.1-.5-1.1-1.1 0-.6.5-1.1 1.1-1.1.6 0 1.1.5 1.1 1.1 0 .6-.5 1.1-1.1 1.1z" fill="#2d4f8d"/>
                                    <path d="m104.3 50.8c-4.8 3.5-7 8.9-6.3 16.5 1.7 17.5 9.1 48.8 11.7 59.7.9.3 1.8.6 2.7.9-1.6-6.6-9.3-38.8-12.7-63.5-.9-6.6 1.7-10.5 4.6-13.6z" fill="#d5d7d8"/>
                                    <path d="m116.2 46.5c.4 0 .7-.1.7-.1-5.2-2.5-13.4-2.6-15.6-2.6-.2.4-.4.9-.4 1.4-.1.1 9.6-.5 15.3 1.3z" fill="#d5d7d8"/>
                                    <path d="m106.8 41.1c-1.6-1.1-2.9-1.8-3.7-2.2-.7.1-1.3.1-2 .2 0 0 2.3.7 4.9 2 0 0-.1 0-.2 0 .7 0 1 0 1 0z" fill="#d5d7d8"/>
                                    <path d="m147.1 107.6c-1.7-.4-8.3 4.3-10.8 6.1-.1-.5-.2-.9-.3-1.1-.3-1-6.7-.4-8.2 1.2-4-1.9-12-5.6-12.1-3.3-.3 3 0 15.5 1.6 16.4 1.2.7 8-3 11.4-4.9 0 0 0 0 .1 0 2.1.5 6 0 7.4-.9.2-.1.3-.3.4-.5 3.1 1.2 9.8 3.6 11.2 3.1 1.8-.5 1.4-15.6-.7-16.1z" fill="#67bd47"/>
                                    <path d="m128.8 122c-2.1-.4-1.4-2.5-1.4-7.4 0 0 0 0 0 0-.5.3-.9.7-.9 1.1 0 4.9-.8 7.1 1.4 7.4 2.1.5 6 0 7.6-.9.3-.2.4-.5.5-1-1.5.9-5.2 1.3-7.2.8z" fill="#43a347"/>
                                    <path d="m24.5 180.6v-24.6h8.9c8.5 0 12.4 6.2 12.4 12 0 6.3-3.8 12.6-12.4 12.6zm2.8-2.9h6.1c6.6 0 9.5-4.9 9.5-9.8 0-4.5-3-9.3-9.5-9.3h-6.1z" fill="#4c4c4c"/>
                                    <path d="m57 180.9c-4.6 0-7.5-3.1-7.5-8v-9.6h2.7v9.5c0 3.5 2 5.6 5.4 5.6 3.2 0 5.5-2.5 5.5-5.8v-9.3h2.7v17.3h-2.4l-.2-3-.4.5c-1.5 1.8-3.4 2.7-5.8 2.8z" fill="#4c4c4c"/>
                                    <path d="m78.7 180.9c-4.5 0-9-2.8-9-8.9 0-5.4 3.6-8.9 9-8.9 2.4 0 4.4.8 6.2 2.5l-1.7 1.7c-1.2-1.1-2.8-1.7-4.4-1.7-3.8 0-6.4 2.6-6.4 6.4 0 4.4 3.2 6.4 6.4 6.4 1.8 0 3.4-.6 4.6-1.8l1.7 1.7c-1.8 1.7-4 2.6-6.4 2.6z" fill="#4c4c4c"/>
                                    <polygon fill="#4c4c4c" points="91.1 180.6 88.5 180.6 88.5 156 91.1 156 91.1 170.9 98.5 163.3 102 163.3 93.8 171.4 103 180.5 103 180.6 99.6 180.6 91.1 172.1"/>
                                    <path d="m106.2 180.6v-24.6h8.9c8.5 0 12.4 6.2 12.4 12 0 6.3-3.8 12.6-12.4 12.6zm2.9-2.9h6.1c6.6 0 9.5-4.9 9.5-9.8 0-4.5-3-9.3-9.5-9.3h-6.1z" fill="#4c4c4c"/>
                                    <path d="m138.7 180.9c-4.6 0-7.5-3.1-7.5-8v-9.6h2.7v9.5c0 3.5 2 5.6 5.4 5.6 3.2 0 5.5-2.5 5.5-5.8v-9.3h2.7v17.3h-2.4l-.1-3-.4.5c-1.5 1.8-3.5 2.7-5.9 2.8z" fill="#4c4c4c"/>
                                    <path d="m160.4 180.9c-4.5 0-9-2.8-9-8.9 0-5.4 3.6-8.9 9-8.9 2.4 0 4.4.8 6.2 2.5l-1.7 1.7c-1.2-1.1-2.8-1.7-4.4-1.7-3.8 0-6.4 2.6-6.4 6.4 0 4.4 3.2 6.4 6.4 6.4 1.8 0 3.4-.6 4.6-1.8l1.7 1.7-.1.1v0c-1.7 1.7-3.8 2.5-6.3 2.5z" fill="#4c4c4c"/>
                                    <polygon fill="#4c4c4c" points="172.9 180.6 170.3 180.6 170.3 156 172.9 156 172.9 170.9 180.3 163.3 183.7 163.3 175.6 171.4 184.7 180.5 184.7 180.6 181.3 180.6 172.9 172.1"/>
                                    <path d="m198.6 181c-9.5 0-12.8-6.8-12.8-12.5 0-3.8 1.3-7.1 3.6-9.5 2.3-2.3 5.5-3.5 9.2-3.5 3.4 0 6.5 1.3 8.9 3.6l-1.6 1.9c-1.9-1.8-4.7-2.9-7.3-2.9-6.9 0-10 5.4-10 10.4 0 4.9 3.1 9.9 10.1 9.9 2.5 0 4.9-.9 6.8-2.5l.1-.1v-6.1h-7.7v-2.5h10.3v9.6c-2.7 2.9-5.8 4.2-9.6 4.2z" fill="#4c4c4c"/>
                                    <path d="m220.4 180.9c-5.2 0-8.9-3.7-8.9-8.9 0-5.2 3.8-9.1 8.9-9.1 5.3 0 9 3.7 9 9.1-.1 5.1-3.8 8.9-9 8.9zm0-15.6c-3.7 0-6.3 2.7-6.3 6.6 0 3.7 2.6 6.4 6.3 6.4 3.7 0 6.3-2.6 6.4-6.4-.1-3.8-2.7-6.6-6.4-6.6z" fill="#4c4c4c"/>
                                    <path d="m230.9 181.2v0c .2-.1.3-.2.3-.4 0-.2-.1-.3-.2-.4-.1-.1-.3-.1-.6-.1-.3 0-.5 0-.6.1v1.6h.4v-.7h.2c.2 0 .3.1.3.3.1.2.1.3.1.4h.4c0-.1-.1-.2-.1-.4 0-.2-.1-.3-.2-.4zm-.5-.1h-.2v-.5c0 0 .1 0 .2 0 .2 0 .3.1.3.2.1.2 0 .3-.3.3z" fill="#4c4c4c"/>
                                    <path d="m230.5 179.5c-.9 0-1.7.7-1.7 1.6 0 .9.7 1.7 1.7 1.7.9 0 1.7-.7 1.7-1.7 0-.9-.7-1.6-1.7-1.6zm0 3c-.7 0-1.3-.6-1.3-1.3 0-.7.5-1.3 1.3-1.3.7 0 1.3.6 1.3 1.3 0 .7-.6 1.3-1.3 1.3z" fill="#4c4c4c"/>
                                </g>
                            </svg>
            <!-- /ko -->
            
        <!-- /ko -->

        <!-- ko if: showTranslateForm() -->
        form#coTranslateForm.ui.form
            .field
                
            .fields( data-bind = " css: { two: twoFields, one: !twoFields() } ")
                .field
                    textarea
                <!-- ko if: twoFields -->
                .field
                    textarea
                <!-- /ko -->
        <!-- /ko -->

        <!-- ko if: searchItem() -->
        .listItems( style = "margin:1em;" )
            .ui.top.fixed.menu.borderless
                .item( style = "width: 90%;" )
                    form.ui.form( data-bind = "submit: search_form" style = "width: 100%;" )
                        .field
                        
                            .ui.search
                                .ui.input.icon
                                    input( style="color:rgba(0,0,0,0.5);border-radius: 500rem!important;" type="text" data-bind = "textInput: searchInputText, hasFocus: SearchInputNextHasFocus" )
                                    
                                    <!-- ko if: searchInputText().length -->
                                    i.icon.circular.search.link.icon( style="color: #4285f4!important;" )
                                    <!-- /ko -->

                                    <!-- ko if: !searchInputText().length -->
                                        i.icon.image.outline.link.circular( data-bind = " click: function (){ document.getElementById('imageInput1').click() } " style = "color: #4285f4!important;")
                                        .hideInput( style="position: absolute;")
                                            input( onchange = "fileInputSelected ( this )" id = "imageInput1" type = "file" accept = 'image/gif,image/jpeg,image/jpg,image/png' style="opacity:0;width: 0px;height: 0px;" )
                                    <!-- /ko -->
                            
                        <!-- ko if: searchItem().action -->
                        .field( style = "margin-left: 1em;" )

                            <!-- ko if: currentlyShowItems() !== 0 -->
                            a.basic.ui.label.yellow.small( data-bind = " click: function() { webItemsClick() }" style = "padding-right: 1em;" )
                                i.icon.rss
                                span( data-bind = "text: infoDefine[ languageIndex() ].coSearch.searchToolBarMenu[0] ")
                            <!-- /ko -->
                            
                            <!-- ko if: searchItem().action.news && currentlyShowItems() !== 1 -->
                            a.basic.ui.label.small( style = "padding-right: 1em;"
                                data-bind = " click: function() { newsButtonClick() }, style: {  cursor: newsButtonShowLoading() ? 'unset' : 'pointer' }, css: { olive: newsItemsArray() && !newsButtonShowLoading(), grey: !newsItemsArray() && !newsButtonShowError(), red: newsButtonShowError() }")
                                
                                <!-- ko if: newsButtonShowError() -->
                                i.icon.info.red
                                span( data-bind = " text: infoDefine[ languageIndex() ].coSearch.errorMessage [ newsButtonErrorIndex()] ")
                                <!-- /ko -->

                                <!-- ko ifnot: newsButtonShowError() -->

                                <!-- ko if: !newsButtonShowLoading() -->
                                i.icon.newspaper.outline
                                
                                <!-- /ko -->

                                <!-- ko if: newsButtonShowLoading() -->
                                i.icon.notched.circle.loading
                                <!-- /ko -->
                                
                                <!-- /ko -->
                                span( data-bind = "text: infoDefine[ languageIndex() ].coSearch.searchToolBarMenu[1] " )
                            <!-- /ko -->

                            <!-- ko if: searchItem().action.image && currentlyShowItems() !== 2 -->
                            a.basic.ui.label.small( data-bind = "click: function() { imageButtonClick() }, style: {  cursor: imageButtonShowLoading() ? 'unset' : 'pointer' }, css: { teal: imageItemsArray() && !imageButtonShowLoading(), grey: !imageItemsArray() && !imageButtonShowError(), red: imageButtonShowError() }"
                                style = "padding-right: 1em;" )
                                
                                

                                <!-- ko if: imageButtonShowError() -->
                                i.icon.info.red
                                span( data-bind = " text: infoDefine[ languageIndex() ].coSearch.errorMessage [ imageButtonErrorIndex()] ")
                                <!-- /ko -->

                                <!-- ko ifnot: imageButtonShowError() -->
                                
                                <!-- ko if: !imageButtonShowLoading() -->
                                i.icon.image.outline
                                
                                <!-- /ko -->

                                <!-- ko if: imageButtonShowLoading() -->
                                i.icon.notched.circle.loading
                                <!-- /ko -->
                                
                                <!-- /ko -->
                                span( data-bind = "text: infoDefine[ languageIndex() ].coSearch.searchToolBarMenu[2] " )
                            <!-- /ko -->

                            <!-- ko if: searchItem().action.video && currentlyShowItems() !== 3 -->
                            a.basic.ui.label.blue.small( data-bind = "click: function() { videoButtonClick() },style: {  cursor: videoButtonShowLoading() ? 'unset' : 'pointer' }, css: { blue: videoItemsArray() && !videoButtonShowLoading(), grey: !videoItemsArray() && !videoButtonShowError(), red: videoButtonShowError() }"
                                style = "padding-right: 1em;")
                                

                                <!-- ko if: videoButtonShowError() -->
                                i.icon.info.red
                                span( data-bind = " text: infoDefine[ languageIndex() ].coSearch.errorMessage [ videoButtonErrorIndex()] ")
                                <!-- /ko -->

                                <!-- ko ifnot: videoButtonShowError() -->
                                
                                <!-- ko if: !videoButtonShowLoading() -->
                                i.icon.video
                                
                                <!-- /ko -->

                                <!-- ko if: videoButtonShowLoading() -->
                                i.icon.notched.circle.loading
                                <!-- /ko -->
                                
                                <!-- /ko -->



                                span( data-bind = "text: infoDefine[ languageIndex() ].coSearch.searchToolBarMenu[3] " )
                            <!-- /ko -->



                        <!-- /ko -->
                        <!-- ko if: !searchItem()['originImage'] && showSearchesRelated() -->
                        
                        .field( style = "margin-left: 1em;" )
                            .ui.grey.header( data-bind = "text: infoDefine[ $root.languageIndex() ].coSearch.SearchesRelated[0] + searchInputTextShow() + infoDefine[ $root.languageIndex() ].coSearch.SearchesRelated[1]" 
                                    style="margin-bottom: 1em;" )
                            .related.ui.grid( style = "padding-bottom: 1em;" )

                                <!-- ko foreach: searchItem().searchesRelated -->
                                a.five.wide.column( href = "#" data-bind = "text: text, click: function () { $root.searchesRelatedSelect ( $index() )}" style="padding-top: 0.2rem;padding-bottom: 0.2rem;")
                                <!-- /ko -->
                        <!-- /ko -->
            .items( data-bind=" style: { 'margin-top': showSearchesRelated() && !searchItem()['originImage'] ? '16.5em' : '8.5em' }, click: function () { $root.showSearchesRelated ( false ); return true;}" )
                
                .AppList.CoContent.content
                    
                    .ui.items.searchItems
                        
                        .totalResults.ui.grey.header
                            .sub.header
                                span.totalResults1( data-bind = " text: infoDefine[ $root.languageIndex() ].coSearch.totalResults[0]" )
                                span.totalResults2( data-bind = " text: $root.searchItem().totalResults" style="margin: 0.5em;" )
                                span.totalResults3( data-bind = " text: infoDefine[ $root.languageIndex() ].coSearch.totalResults[1]" )
                        
                        <!-- ko if: searchItem()['originImage'] -->
                        .imageResultInfo.item
                            
                            <!-- ko with: searchItem()['originImage'] -->
                            .image
                                img( data-bind = " attr: { src: img }")
                            .content
                                .meta( data-bind = " text: infoDefine[ $root.languageIndex() ].coSearch.imageSize ")
                                .description( data-bind = " text: size" style = "color: gray;")
                                .meta
                                    
                                    <!-- ko if: $root.similarImagesLoading -->
                                    span
                                        i.icon.notched.circle.loading.purple
                                        span.purple( data-bind = " text: infoDefine[ $root.languageIndex() ].coSearch.similarImages" style = "color: #a333c8!important;")
                                    <!-- /ko -->

                                    <!-- ko ifnot: $root.showSimilarImagesError() -->
                                    .notSimilarImagesShowError

                                        <!-- ko ifnot: $root.similarImagesLoading -->
                                        .ifNotSimilarImagesLoading

                                            <!-- ko if: $root.searchSimilarImagesList().length -->
                                            .ifHaveSearchSimilarImagesList
                                                i.icon.file.image.outline.orange.link( data-bind = "click: function() { $root.similarImagesReadyClick()}")
                                                a.ui( data-bind = "text: infoDefine[ $root.languageIndex() ].coSearch.similarImages, click: function() { $root.similarImagesReadyClick()}", style="color:orange!important" )
                                            <!-- /ko -->

                                            <!-- ko ifnot: $root.searchSimilarImagesList().length -->
                                            .ifHaveNotSearchSimilarImagesList
                                                a.ui( data-bind = "text: infoDefine[ $root.languageIndex() ].coSearch.similarImages, click: function() { $root.requestSimilarImagesClick()}" )
                                            <!-- /ko -->
                                        <!-- /ko -->
                                    <!-- /ko -->

                                    <!-- ko if: $root.showSimilarImagesError() -->
                                    span
                                        i.icon.info.circle.red.link( data-bind = "click: function () { $root.SimilarImagesErrorClick ()}" )
                                        a.ui( data-bind = "text: infoDefine[ $root.languageIndex() ].coSearch.errorMessage [ $root.similarImagesErrorIndex()], click: function () { $root.SimilarImagesErrorClick ()}"
                                            style = "color: #990000a8!important;")
                                    <!-- /ko -->
                                
                            <!-- /ko -->
                        <!-- /ko -->
                        .space
                        .space


                        <!-- ko foreach: searchItemList -->
                        .item
                            <!-- ko if: imageInfo && imageInfo['img'] -->
                            .image.ui.top.aligned( data-bind = "style: { height: imageInfo['videoTime'] ? '90px' : 'auto' }" style = " width:150px ")
                                img( data-bind = "attr: { src: imageInfo.img }")
                                <!-- ko if: imageInfo['videoTime'] -->
                                .ui.bottom.right.attached.label.tiny( data-bind = "text: imageInfo['videoTime'] " style = " background-color: #3130307a!important;; color: rgba(255, 252, 252, 0.77)!important;;")
                                <!-- /ko -->

                            <!-- /ko -->
                            .content
                                .header
                                    a( data-bind = "text: title, attr: { href: url } "  style="font-weight: normal;font-size: medium;" target = "_blank" )
                                <!-- ko ifnot: newsBrand -->
                                .meta( style="margin:unset;")
                                    span
                                        
                                        <!-- ko if: !showLoading() && ! snapshotReady() && !showError() -->
                                        i.icon.object.group.grey.link( data-bind = "click: function() { $root.getSnapshotClick( $index() )}")
                                        <!-- /ko -->

                                        <!-- ko if: showLoading -->
                                        i.icon.notched.circle.loading.grey
                                        <!-- /ko -->

                                        <!-- ko if: snapshotReady -->
                                        i.icon.file.image.outline.olive.link( data-bind = "click: function() { $root.showSnapshotClick( $index() )}" )
                                        <!-- /ko -->
                                        
                                        <!-- ko if: showError -->
                                        i.icon.info.circle.red.link( data-bind = "attr: { id: id, 'data-content': infoDefine[ $root.languageIndex() ].coSearch.errorMessage[ errorIndex()]}")
                                        <!-- /ko -->

                                    span( data-bind="text: urlShow, style: { color: snapshotReady() ? 'orange' : ( showError() ? 'red' : 'green') } "
                                        style="margin-top: 0.5em; margin-bottom: 0.5em; font-size: small;" )
                                <!-- /ko -->
                                .description( style = " color: grey; ")

                                    <!-- ko if: newsBrand -->
                                    p
                                        span
                                            <!-- ko if: !showLoading() && ! snapshotReady() && !showError() -->
                                            i.icon.object.group.grey.link( data-bind = "click: function() { $root.getSnapshotClick( $index() )}")
                                            <!-- /ko -->

                                            <!-- ko if: showLoading -->
                                            i.icon.notched.circle.loading.grey
                                            <!-- /ko -->

                                            <!-- ko if: snapshotReady -->
                                            i.icon.file.image.outline.olive.link( data-bind = "click: function() { $root.showSnapshotClick( $index() )}" )
                                            <!-- /ko -->
                                            
                                            <!-- ko if: showError -->
                                            i.icon.info.circle.red.link( data-bind = "attr: { id: id, 'data-content': infoDefine[ $root.languageIndex() ].coSearch.errorMessage[ errorIndex()]}")
                                            <!-- /ko -->

                                        span( data-bind = " text: newsBrand " style = "font-weight: bolder; color: #906363db;" )
                                        <!-- ko if: beforeTime -->
                                        <!-- ko with: beforeTime -->

                                        <!-- ko if: timeNumber -->
                                        span( data-bind = "text: ' - ' + timeNumber + ' ' + infoDefine[ $root.languageIndex() ].coSearch.timeUnit[ timeUnit ]" style = "font-weight: bolder; color: #906363db;")
                                        <!-- /ko -->

                                        <!-- ko if: time -->
                                        span( data-bind = "text: ' - ' + infoDefine[ $root.languageIndex() ].coSearch.TimeTolocalTime ( time )" style = "font-weight: bolder; color: #906363db;")
                                        <!-- /ko -->

                                        <!-- /ko -->
                                        <!-- /ko -->

                                    <!-- /ko -->
                                    
                                    <!-- ko ifnot: newsBrand -->
                                    <!-- ko if: beforeTime -->
                                    <!-- ko with: beforeTime -->

                                    <!-- ko if: timeNumber -->
                                    span( data-bind = "text: timeNumber + ' ' + infoDefine[ $root.languageIndex() ].coSearch.timeUnit[ timeUnit ] + ' - '" style = "font-weight: bolder; color: #906363db;")
                                    <!-- /ko -->

                                    <!-- ko if: time -->
                                    span( data-bind = "text: infoDefine[ $root.languageIndex() ].coSearch.TimeTolocalTime ( time ) + ' - '" style = "font-weight: bolder; color: #906363db;")
                                    <!-- /ko -->

                                    <!-- /ko -->
                                    <!-- /ko -->
                                    <!-- /ko -->
                                    span( data-bind = "text: description" style = "color: grey")

                        .space
                        .space
                        <!-- /ko -->
                        <!-- ko if: ! nextButtonShowError() -->
                        button.ui.large.button( data-bind = "css: { loading: moreResultsButtomLoading, negative: nextButtonShowError },text: infoDefine[ $root.languageIndex() ].coSearch.moreResults, click: searchNext" style="margin-top: 1em;margin-bottom: 2em;" )
                        <!-- /ko -->

                        <!-- ko if: nextButtonShowError() -->
                        button.ui.large.button.negative( data-bind = "text: infoDefine[ languageIndex() ].coSearch.errorMessage[ nextButtonErrorIndex()], click: function() { nextButtonErrorClick() }" style="background-color: #b94835e3;margin-top: 1em;margin-bottom: 2em;")

                        <!-- /ko -->
                        .space
                        .space
        <!-- /ko -->



    <!-- /ko -->

    <!-- ko if: !showMain() && showSnapshop () -->
    .sub( data-bind = " with: showWebPage ")
        .ui.top.fixed.menu.borderless
            .item( style = "width: 90%;" )
                form.ui.form( style = "width: 100%;" data-bind = "submit: function(){ $root.search_form() }" )
                    
                    .field
                        .ui.search
                            .ui.input.icon( data-bind = "css : { 'loading disabled': $root.showInputLoading }" )
                                input( style = "color: rgba ( 0,0,0,0.5 );border-radius: 500rem!important;" type = "text" data-bind = "value: $root.searchInputText, hasFocus: $root.hasFocus" )
                                i.icon.circular.search.link.icon( style="color: #4285f4!important;" )
                    <!-- ko if: $root.showSubViewToolBar() -->
                    .field
                        <!-- ko if: $root.searchItem () -->
                        a.ui.red.label(  data-bind = "click: function(){ $root.showWebPage ( null );$root.showMain ( true )}" ) x
                        <!-- /ko -->

                        <!-- ko if: !$root.htmlIframe () -->
                        a.ui.olive.label( data-bind = "click: function(){ $root.htmlIframe ( true )}, text: infoDefine[ $root.languageIndex() ].coSearch.label_HTML")

                        <!-- /ko -->

                        <!-- ko if: $root.htmlIframe () -->
                        a.ui.teal.label( data-bind = "click: function(){ $root.htmlIframe ( false )}, text: infoDefine[ $root.languageIndex() ].coSearch.label_picture")
                        
                        <!-- /ko -->
                    <!-- /ko -->
        <!-- ko if: $root.htmlIframe () -->
        iframe( data-bind = " style: { height: height, 'margin-top': $root.showSubViewToolBar() ? '9em' : '5.6em'  }, attr: { src: localUrl }, click: function () { $root.showSubViewToolBar( false )} "  style = "border: none;width: 100%;" sandbox = "allow-same-origin allow-scripts" )
        <!-- /ko -->

        <!-- ko if: !$root.htmlIframe () -->
        img( data-bind = " style: { 'margin-top': $root.showSubViewToolBar() ? '9em' : '5.6em' }, attr: { src: png }, click: function() { $root.showSubViewToolBar(false)}" style = "border: none;width: 100%;")
        <!-- /ko -->

    <!-- /ko -->

    <!-- ko if: !showMain() && showSearchSimilarImagesResult () -->
    .closeButton( style="z-index: 999;top: 1.3em; left: 1em; position: fixed; width: 2em;")
        i.icon.left.chevron.link.circular.teal( data-bind = "click: function () { closeSimilarImagesResult() }" )
    .ui.six.doubling.cards( data-bind=" foreach: searchSimilarImagesList " style="margin: 2em; margin-top: 3em;")
        
        .card
            .image
                img( data-bind="attr: { src: imgSrc }")
            .content
                .meta
                    span.data( data-bind = "text: infoDefine[ $root.languageIndex() ].coSearch.imageSize")
                    span.data( data-bind = "text: size" )
                .description( data-bind = "text: description ")
            .extra.content
                span
                    i.icon.object.group.olive
                span( data-bind = "text: webUrl")
    <!-- /ko -->

    
